<template>
  <div>
    <el-row class="utils" v-if="!title.includes('详情')">
      <el-col :span="24" align="right">
        <el-button type="primary" @click="handleAdd()">添加</el-button>
      </el-col>
    </el-row>
    <el-table :data="store.state.projectCenter.form.projectInvestmentsList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <!-- <el-table-column prop="investmentTypeName" :formatter="formatter" label="投入类型" /> -->
      <el-table-column prop="subjectName" label="科目" />
      <el-table-column prop="amount" label="金额(万元)" />
      <el-table-column fixed="right" label="操作" v-if="!title.includes('详情')">
        <template #default="scope">
          <el-button @click="handleDel(scope.$index)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="addDialog" append-to-body width="40%" title="添加投入" @close="handleClose">
      <el-form
        ref="investmentForm"
        :model="form"
        label-position="left"
        label-width="100px"
        :rules="rules"
        class="demo-form-inline"
      >
        <!-- <el-form-item label="投入类型:" required prop="investmentTypeName">
          <selectOptionDick
            v-model="form.investmentType"
            :options="store.state.projectCenter.projectDict.KHGL_XMZL_IN_TYPE"
            @changeValue="getInvestmentTypeName"
          ></selectOptionDick>
        </el-form-item> -->
        <el-form-item label="科目:" required prop="subjectName">
          <selectOptionDick
            v-model="form.subject"
            :options="store.state.projectCenter.projectDict.KHGL_XMZL_IN_SUBJECT"
            @changeValue="getSubjectName"
          ></selectOptionDick>
        </el-form-item>
        <el-form-item label="金额(万元):" required prop="amount">
          <el-input
            v-model="form.amount"
            type="text"
            @input="form.amount = NumberCheck(form.amount)"
            :maxlength="10"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialog = false">关闭</el-button>
          <el-button type="primary" @click="save()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import selectOptionDick from '@/views/project/components/selectOptionDick/index.vue'
import { defineComponent, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { NumberCheck, ergodicDickName } from '@/utils/utils'

export default defineComponent({
  props: {
    title: {
      type: String,
      default:''
    },
  },
  components: {
    selectOptionDick,
  },
  setup() {
    const store = useStore()
    let addDialog = ref(false)
    let form = reactive({
      investmentType: '', //投入类型
      investmentTypeName: '', //投入类型名称
      subject: '', //科目
      subjectName: '', //科目名称
      amount: '', //金额(万元)
    })
    const rules = reactive({
      investmentTypeName: { required: true, message: '该字段必填' },
      subjectName: { required: true, message: '该字段必填' },
      amount: { required: true, message: '该字段必填' },
    })
    console.log(store.state.projectCenter.form.projectInvestmentsList, 'asd')

    const formatter = (row) => {
      if (Object.keys(store.state.projectCenter.projectDict).length != 0) {
        // return ergodicDickName(
        //   row.investmentType,
        //   store.state.projectCenter.projectDict.KHGL_XMZL_IN_TYPE
        // )
      }
    }
    const formatter2 = (row) => {
      if (Object.keys(store.state.projectCenter.projectDict).length != 0) {
        // return ergodicDickName(
        //   row.subject,
        //   store.state.projectCenter.projectDict.KHGL_XMZL_IN_SUBJECT
        // )
      }
    }
    const getInvestmentTypeName = (item) => {
      console.log(item, 'getInvestmentTypeName')
      form.investmentType = item.itemValue
      form.investmentTypeName = item.itemText
    }
    const getSubjectName = (item) => {
      console.log(item, 'getSubjectName')
      form.subject = item.itemValue
      form.subjectName = item.itemText
    }
    const handleAdd = () => {
      addDialog.value = true
      for (let key in form) {
        form[key] = ''
      }
    }
    const handleDel = (index) => {
      console.log(index)
      store.state.projectCenter.form.projectInvestmentsList.splice(index, 1)
    }
    //表单验证
    const investmentForm = ref()
    const handleClose = () => {
      investmentForm.value.resetFields()
    }
    const save = async () => {
      await investmentForm.value.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
          addDialog.value = false
          store.state.projectCenter.form.projectInvestmentsList.push({ ...form })
          investmentForm.value.resetFields()
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    return {
      addDialog,
      form,
      rules,
      store,
      investmentForm,
      formatter,
      formatter2,
      getInvestmentTypeName,
      getSubjectName,
      handleAdd,
      handleDel,
      handleClose,
      save,
      NumberCheck,
    }
  },
})
</script>

<style scoped>
.utils {
  margin: 10px 20px;
}
.demo-form-inline {
  margin: 10px 5%;
}
.demo-form-inline .el-form-item {
  width: 80%;
}
:deep(.el-dialog__body) {
  display: block;
  padding: 10px 20px;
}
.el-select {
  width: 100%;
  margin: 0;
}
:deep(.el-table__fixed-right) {
  height: 100% !important;
}
</style>
